<template>
	<view>
		<scroll-view class="scroll-view-content" scroll-y="true" @scroll="pageScroll">
			<view v-for="(item,index) in imgList" class="item" :key="index">
				<image :class="item.show ? 'active': ''" :src="item.show ? item.src : ''"></image>
			</view>
		</scroll-view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			screenWidth: null,
			screenHeight: null,
			imgList:[]
		};
	},
	props:{
		list:{
			type:Array,
			default:function(){
				return []
			}
		},
	},
	watch:{
		list(newVla,oldVla){
			
		}
	},
	methods: {
		// 滚动事件
		pageScroll(e) {
			this.showImg()
		},
		showImg(){
			let height = this.screenHeight  // 页面的可视高度
			let _this = this
			uni.createSelectorQuery().in(_this).selectAll('.item').boundingClientRect((ret) => {
				ret.forEach((item, index) => {
					if (item.top <= height && !_this.imgList[index].show ) {  //判断是否在显示范围内
						// 根据下标改变状态
						_this.$set(_this.imgList[index],'show',true)
						_this.$forceUpdate(); 
					}
				})
			}).exec()
		}
	},
	created() {
		this.list.map((item,index) => {
			this.imgList[index] = {
				show:false,
				src:item,
			}
		})
	},
	mounted() {
		let  _this = this
		uni.getSystemInfo({
			success(res) {
				const screenWidth = res.screenWidth;
				const screenHeight = res.screenHeight;
				_this.screenWidth = screenWidth;
				_this.screenHeight = screenHeight;
			}
		});
		_this.$nextTick(function(){
			this.showImg()
		})
	}
};
</script>
<style lang="scss" scoped>
image{
    transition: all .3s ease;
    opacity:0;
}
.active{
    opacity: 1;
}
.item{
	background-color: #ccc;
}
.scroll-view-content {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
</style>
